<template>
  <div class="course-list">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <el-form :inline="true" ref="form" :model="form" class="demo-form-inline">
                <el-form-item label="课程名称" prop="courseName">
                    <el-input v-model="form.courseName" placeholder="请输入课程名称"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="form.status" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-button  type="primary" style="float: right" @click="$router.push({
                    name: 'course-create'
                })">
                    <i class="el-icon-plus"></i> 新建课程
                </el-button>
                <el-row>
                    <el-button  @click="onReset">重置</el-button>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-row>
            </el-form>
        </div>
        <el-table
        v-loading="isLoading"
        :data="courses"
        style="width: 100%">
        <el-table-column
            prop="id"
            label="ID"
            width="60"
        >
        </el-table-column>
        <el-table-column
            prop="courseName"
            label="课程名称"
        >
        </el-table-column>
        <el-table-column
            prop="price"
            label="价格">
        </el-table-column>
        <el-table-column
            prop="sortNum"
            label="排序">
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            align="center"
            width="80">
            <template slot-scope="scope">
                <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                @change="onStateChange(scope.row)"
                :disabled="scope.row.isStatusLoading"
                active-color="#13ce66"
                inactive-color="#ff4949">
                </el-switch>
            </template>
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
            width="240">
            <template slot-scope="scope">
                <el-button size="small" @click="$router.push({
                  name: 'course-edit',
                  params: {
                    courseId: scope.row.id
                  }
                })">编辑</el-button>
                <el-button size="small" @click="$router.push({
                  name: 'course-sections',
                  params: {
                    courseId: scope.row.id
                  }
                })">内容管理</el-button>
            </template>
        </el-table-column>
        </el-table>
        <el-pagination
        style="text-align: center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :disabled="isLoading"
        :current-page.sync="form.currentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
        </el-pagination>
    </el-card>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Form } from 'element-ui'
import { getQueryCourses, changeState } from '@/services/course'

export default Vue.extend({
  name: 'CourseList',
  created () {
    this.loadCourseList()
  },
  data () {
    return {
      form: {
        courseName: '',
        status: '',
        currentPage: 1,
        pageSize: 10
      },
      options: [{
        value: '',
        label: '全部'
      }, {
        value: '1',
        label: '上架'
      }, {
        value: '0',
        label: '下架'
      }],
      courses: [],
      totalCount: 0,
      isLoading: false
    }
  },
  methods: {
    async loadCourseList () {
      this.isLoading = true
      const { data } = await getQueryCourses(this.form)
      data.data.records.forEach((item: any) => {
        item.isStatusLoading = false
      })
      this.courses = data.data.records
      this.totalCount = data.data.total
      this.isLoading = false
    },
    handleSizeChange (val: number) {
      // 修改每页大小
      this.form.pageSize = val
      // 每页大小改变重新查询第一页数据
      this.form.currentPage = 1
      // 重新请求数据
      this.loadCourseList()
    },
    handleCurrentChange (val: number) {
      // 修改要查询的页码
      this.form.currentPage = val
      // 重新请求数据
      this.loadCourseList()
    },
    onSubmit () {
      this.form.currentPage = 1
      this.loadCourseList()
    },
    onReset () {
      (this.$refs.form as Form).resetFields()
    },
    async onStateChange (course: any) {
      course.isStatusLoading = true
      await changeState({
        courseId: course.id,
        status: course.status
      })
      this.$message.success(course.status === 0 ? '下架成功' : '上架成功')
      course.isStatusLoading = false
      this.loadCourseList()
    }
  }
})
</script>

<style lang="course-list" scoped></style>
